<template>
  <el-dialog
    title="新增车辆"
    :visible="dialogFormVisible"
    @close="onClose"
  >
    <el-form
      label-width="100px"
      :rules="rules"
      :model="ruleForm"
    >
      <el-form-item
        label="车辆类型"
        prop="truckTypeId"
      >
        <el-select
          v-model="ruleForm.truckTypeId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in vehicleInfoList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="车牌号码"
        prop="licensePlate"
      >
        <el-input
          v-model="ruleForm.licensePlate"
          placeholder="请输入车牌号码"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="GPS设备ID"
        prop="deviceGpsId"
      >
        <el-input
          v-model="ruleForm.deviceGpsId"
          placeholder="请输入GPS设备ID"
        ></el-input>
      </el-form-item>
      <el-row
        type="flex"
        justify="center"
      >
        <el-button
          type="warning"
          @click="addCar"
        >确认</el-button>
        <el-button @click="onClose">取消</el-button>
      </el-row>

    </el-form>
  </el-dialog>
</template>

<script>
import { truckTypeAdd } from '@/api/transit'
export default {
  name: 'AddDialog',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    vehicleInfoList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      ruleForm: {
        allowableLoad: 0,
        allowableVolume: 0,
        brand: '',
        deviceGpsId: '',
        driverName: '',
        driverNum: 0,
        id: 0,
        licensePlate: '',
        loadingRatio: 0,
        picture: '',
        runStatus: 0,
        status: 0,
        transportLineName: '',
        truckLicenseId: 0,
        truckTypeId: '',
        truckTypeName: '',
        workStatus: 0
      },
      rules: {
        licensePlate: [
          { required: true, message: '请输入车牌号码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        truckTypeId: [
          { required: true, message: '请选择车辆类型', trigger: 'change' }
        ],
        deviceGpsId: [
          { required: true, message: '请输入GPS设备ID', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onClose() {
      this.$emit('update:dialogFormVisible', false)
    },
    // 添加车辆
    async addCar() {
      try {
        await truckTypeAdd(this.ruleForm)
        this.$emit('updateList')
        this.$message.success('添加车辆成功')
        this.onClose()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>
.el-option {
width: 100%;
}
</style>
